<template>
	<!-- 跑腿代运 -->
	<view class="runErrands public">
		<view class="statusTitle">
			<view :class="{ 'statusTitleSelected': statusTitleNum == item.id }" v-for="(item, index) in statusTitle"
				:key="index" @click="eventStatusTitle(item)">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="icon-box-img" v-if="postList.length == 0">
			<img src="../../static/index/noResult.png" alt="">
			<view class="text">
				未查询到相关数据
			</view>
		</view>
		<view style="padding-bottom: 150rpx;">
			<view class="main" v-for="(item, index) in postList" :key="index" @click.stop="skipInfo(item)">
				<view class="main-item">
					<view class="title">
						<view class="">
						</view>
						<view class="title-right">
							{{ item.order_type_desc }}
						</view>
					</view>
					<view class="main-main" v-if="item.order_type == 3">
						<view class="">
							<view class="move">
								<text>搬</text>
							</view>
						</view>
						<view class="main-right">
							<view class=" main-right-user">
								<view class="main-right-header">
									{{ item.receiving_address.data.address }}
								</view>
								<view class="main-right-footer">
									<text> {{ item.receiving_address.data.mobile }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="main-main" v-if="item.order_type != 3">
						<view class="">
							<steps></steps>
						</view>
						<view class="main-right">
							<view class="main-right-business">
								<view class="">
									<view class="main-right-header">
										{{ item.take_address.data.address }}
									</view>
									<view class="main-right-footer">
										<view class="">
											<text>{{ item.take_address.data.mobile }}</text>
										</view>
									</view>
								</view>
								<view class="">
									>
								</view>
							</view>
							<view class=" main-right-user">
								<view class="main-right-header">
									{{ item.receiving_address.data.address }}
								</view>
								<view class="main-right-footer">
									<text> {{ item.receiving_address.data.mobile }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<!-- 跑腿代运-代取货/待送达 -->
						<view class="CollectionAndDeliveryByProxy">
							<!-- 新任务 -->
							<view class="footer-buttonOne" v-if="statusTitleNum == 1">
								<button @click.stop="orders(item)">接单</button>
							</view>
							<!-- 进行中 -->
							<view class="footer-buttonTwo" v-if="statusTitleNum == 2">
								<view class="" @click.stop="MakingPhoneCalls(item)">
									<image src="@/pages_rider/static/phone.png" mode=""></image>
									<text>联系收货</text>
								</view>
								<button @click.stop="pickUp(item)">已到达</button>
							</view>
							<!-- 已完成 -->
							<view class="footer-buttonTwo" v-if="statusTitleNum == 3">
								<button class="statuschang">已完成</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <u-loadmore :status="status" v-if="postList.length > 10" /> -->
		</view>

	</view>
</template>

<script>
import steps from '../components/package/steps/steps.vue'

const $api = require('@/utils/request.js').API
export default {
	components: {
		steps,

	},
	data() {
		return {
			statusTitle: [
				{
					name: '新任务',
					id: 1
				},
				{
					name: '进行中',
					id: 2
				},
				{
					name: '已完成',
					id: 3
				},
			],

			statusTitleNum: 1, // 头部状态
			postList: [],
			status: 'loading',
			// 当前页
			page: 1,
			// 总页数
			page_count: 0,

		}
	},
	created() {
		this.getList()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getList()
	},
	methods: {
		// 接单列表
		getList() {
			let obj = {
				page_size: 9999,
				order_status: this.statusTitleNum
			}
			this.postList = []
			$api.legwork_order(obj).then(res => {
				this.postList = res.data.data
				uni.stopPullDownRefresh()
			})
		},
		// 切换tabs
		eventStatusTitle(item) {
			this.statusTitleNum = item.id
			this.getList()
		},
		// 接单
		orders(item) {
			$api.legwork_orderReceive({ id: item.id }).then(res => {
				this.getList()
			})
		},
		// 送达
		pickUp(item) {
			$api.legwork_orderFinish({ id: item.id }).then(res => {
				this.getList()
			})
		},
		// 拨打电话
		MakingPhoneCalls(item) {
			uni.makePhoneCall({
				phoneNumber: item.receiving_address.data.mobile
			})
		},
		// 跳转订单详情
		skipInfo(item) {
			uni.navigateTo({
				url: '/pages_runErrands/OrderingInformation?data=' + JSON.stringify(item)
			})
		}
	}
}
</script>

<style lang="less" scoped>
.runErrands {
	background: #F7F7F7;

	// 选中外卖订单头部标题
	.statusTitleSelected {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: #F14500;
		border-bottom: 2px solid #F14500;
	}

	// 外卖订单头部标题
	.statusTitle {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 94rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
		color: #2E2E2E;
	}

	// 内容
	.main {
		width: 702rpx;
		// height: 417rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 16rpx;

		.main-item {
			width: 640rpx;
			margin: auto;

			// 下单时间，什么时间前送到
			.title {
				display: flex;
				justify-content: space-between;
				padding-top: 31rpx;
				padding-bottom: 25rpx;

				.title-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 104rpx;
					height: 34rpx;
					border: 1px solid #F14500;
					border-radius: 17rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #F14500;
				}
			}

			.main-main {
				display: flex;
				border-bottom: 1px solid #F2F2F2;
				padding-bottom: 23rpx;

				// 运
				.move {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38rpx;
					height: 38rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 50%;
					background: #F14500;
					margin-right: 15rpx;
				}

				.main-right {

					// 商家地址，用户地址
					.main-right-header {
						font-size: 26rpx;
						font-weight: 500;
						color: #3A3A3A;
					}

					// 商家电话，用户电话
					.main-right-footer {
						height: 35rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #979797;

						text {
							padding-left: 20rpx;
						}
					}

					.main-right-business {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 600rpx;
					}

					.main-right-user {
						padding-top: 38rpx;
					}
				}
			}

			// 按钮
			.footer-button {
				margin-top: 40rpx;
				padding-bottom: 20rpx;

				button {
					width: 637rpx;
					height: 69rpx;
					background: #F14500;
					border-radius: 35rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}

	.CollectionAndDeliveryByProxy {

		// 按钮
		.footer-buttonOne {
			margin-top: 40rpx;
			padding-bottom: 20rpx;

			button {
				width: 637rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		// 按钮
		.footer-buttonTwo {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding-bottom: 20rpx;

			view:first-child {
				display: flex;
				align-items: center;
				font-size: 35rpx;
				font-weight: 400;
				color: #F14500;
				margin-right: 30rpx;

				image {
					width: 31rpx;
					height: 38rpx;
				}

				text {
					padding-left: 15rpx;
				}
			}

			button {
				// width: 430rpx;
				width: 400rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.statuschang {
				width: 637rpx;
				// width: 700rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
	}
}


.icon-box-img {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 80rpx;
	text-align: center;

	img {
		width: 343rpx;
		height: 306rpx;
	}

	image {
		width: 343rpx;
		height: 306rpx;
	}

	.text {
		margin-top: 35rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #C3C4C4;
		line-height: 30rpx;
	}
}
</style>